<template>
	<view class="searchDox">
		<view class="searchBox">
			<image src="../../static/放大镜.png"></image>
			<input @input="suggest" @blur="complete" v-model="text" class="search" type="text" placeholder="搜索歌曲"
				focus="true" />
		</view>
		<!-- 历史记录 -->
		<view v-show="!isShow" class="searchHistory" v-if="textList.length">
			<text>历史记录</text>
			<view class="historyBox">
				<view class="history" v-for="(item,index) in textList" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 热搜榜 -->
		<view v-show="!isShow">
			<text class="theTop">热搜榜</text>
			<view class="toplist">
				<view v-for="(item,index) in searchTop" :key="item.score" class="searchTop">
					<text class="indexs">{{index+1}}</text>
					<view class="yige">
						<view>{{item.searchWord}}
							<image :src="item.iconUrl" mode="aspectFit"></image>
						</view>
						<text class="lyric">{{item.content}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 搜索联想 -->
		<view class="suggest" v-show="!fafa">
			<text class="minText">搜索：{{text}}</text>
			<view class="suggest_one" v-for="item in suggestList" :key="item.id">
				<image src="../../static/放大镜.png" mode="widthFix"></image>
				<text>{{item.keyword}}</text>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="searchAccomplish" v-show="fafa">
			<view class="fan" v-for="item in matchingList" @click="single(item.id)">
				<view>
					<view>{{item.name}}</view>
					<view class="text_two">{{item.artists[0].name}}-{{item.album.name}}</view>
				</view>
				<view><image src="../../static/播放黑.png" mode=""></image></view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getSearch,
		getSuggest,
		getMatching
	} from "../../ajax/ajax.js"
	export default {
		data() {
			return {
				text: "",
				textList: [],
				searchTop: [],
				suggestList: [],
				isShow: false,
				fafa:false,
				matchingList:[]
			}
		},
		components: {

		},
		onLoad() {
			getSearch().then((res) => {
				this.searchTop = res.data
			})
		},
		methods: {
			single(id) {
				console.log(id);
				uni.navigateTo({
					url: "/pages/single/single?id=" + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			complete() {
				console.log(this.text);
				getMatching({keywords:this.text}).then(res=>{
					console.log(res.result.songs);
					this.matchingList = res.result.songs
				})
				this.fafa = true
				const index = this.textList.indexOf(this.text)
				if (index == -1) {
					this.textList.unshift(this.text)
				} else {
					this.textList.splice(index, 1)
					this.textList.unshift(this.text)
				}
			},
			suggest(e) {
				// console.log(e.detail.value);
				this.text = e.detail.value
				this.fafa = false
				if (e.detail.value) {
					this.isShow = true
					getSuggest({
						keywords: e.target.value,
						type: 'mobile'
					}).then((res) => {
						// console.log(res.result.allMatch);
						this.suggestList = res.result.allMatch
					})
				} else {
					this.isShow = false
				}
			}
		}
	}
</script>

<style>
	.searchAccomplish{
		margin: 20rpx 0;
	}
	.text_two{
		font-size: 20rpx;
		color: #666666;
	}
	.fan{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}
	.fan image{
		width: 50rpx;
		height: 50rpx;
		
	}
	.minText {
		font-size: 20rpx;
		color: #007AFF;
	}

	.suggest {
		margin-top: 30rpx;
	}

	.suggest_one {
		margin: 50rpx 0;
		font-size: 22rpx;
		position: relative;
	}

	.suggest_one image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 5rpx;
		left: 5rpx;
	}

	.suggest_one text {
		margin-left: 50rpx;
	}

	.searchDox {
		padding: 0 10rpx;
	}

	.toplist {
		padding-left: 10rpx;
	}

	.indexs {
		display: inline-block;
		width: 40rpx;
	}

	.theTop {
		color: 333;
		font-size: 20rpx;
	}

	.lyric {
		display: inline-block;
		width: 500rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.searchTop {
		display: flex;
		align-items: center;
		margin: 10rpx 0;
	}

	navigator {
		width: 590rpx;
	}

	.search {
		padding: 10rpx 60rpx;
		width: 590rpx;
		margin: auto;
		background-color: #eee;
		border-radius: 35rpx;
	}

	.searchBox {
		position: relative;
		margin-top: 5rpx;
	}

	.searchBox image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 20rpx;
		left: 40rpx;
	}

	.yige {
		margin-left: 30rpx;
		padding-left: 10rpx;
	}

	.yige view {
		font-size: 28rpx;
		font-weight: 600;
	}

	.yige text {
		font-size: 14rpx;
	}

	.yige image {
		width: 45rpx;
		height: 30rpx;
	}

	.searchHistory {
		margin-top: 10rpx;
	}

	.searchHistory text {
		font-size: 26rpx;
	}

	.historyBox {
		display: flex;
	}

	.history {
		margin: 5rpx 10rpx;
		background-color: #eee;
		font-size: 20rpx;
		padding: 5rpx 10rpx;
		min-width: 30rpx;
		text-align: center;
		border-radius: 25rpx;
	}
</style>
